<!DOCTYPE html>
<html lang="en">
<head>
	<style>
		svg{border:1px solid #ccc;}
	</style>
</head>
<body>


<svg width="200" height="200" viewBox="0 0 100 100">
        <path d="M0 0 L100 100"
            fill="none" stroke="#00f" />

        <circle cx="0" cy="0" r="3" fill="#f00" fill-opacity="0.8">
            <animateMotion path="M0 0 L100 100"
                begin="t.click" dur="2s" fill="freeze">
                
            </animateMotion>
        </circle>
		
		<text x="30" y="80" font-size="8" text-anchor="middle" id="t" style="cursor:pointer;user-select:none">点我</text>
    </svg>

    <svg width="200" height="200" viewBox="0 0 100 100">
        <path d="M0 0 C0 100 100 0 100 100"
            fill="none" stroke="#00f" />

        <circle cx="0" cy="0" r="3" fill="#f00" fill-opacity="0.8">
            <animateMotion path="M0 0 C0 100 100 0 100 100"
                keyPoints="0;1"
                keyTimes="0;1"
                calcMode="spline"
                keySplines="0 1 1 0"
                begin="t2.click" dur="2s" fill="freeze">
                
            </animateMotion>
        </circle>
		
		<text x="30" y="80" font-size="8" text-anchor="middle" id="t2" style="cursor:pointer;user-select:none">点我</text>
    </svg>

    <svg width="200" height="200" viewBox="0 0 100 100">
        <path d="M0 0 C100 0 0 100 100 100"
            fill="none" stroke="#00f" />

        <circle cx="0" cy="0" r="3" fill="#f00" fill-opacity="0.8">
            <animateMotion path="M0 0 C100 0 0 100 100 100"
                keyPoints="0;1"
                keyTimes="0;1"
                calcMode="spline"
                keySplines="1 0 0 1"
                begin="t3.click" dur="2s" fill="freeze">
                
            </animateMotion>
        </circle>
		<text x="30" y="80" font-size="8" text-anchor="middle" id="t3" style="cursor:pointer;user-select:none">点我</text>
    </svg>

	

</body>
</html>